const Row = ({ index, style, forwardRef }) => {
  return (
    <div className={index % 2 ? 'list-item-odd' : 'list-item-even'} style={style} ref={forwardRef}>
      {`Row ${index}`}
    </div>
  )
}
 
import { useState } from 'react'
import FixedSizeList from './ScrollOver'
//单个item的高度
const itemHeight=70
//总条数
const itemSize =100
const containnerHeight = 300
const demoList = [
    'https://www.w3schools.com/w3images/fjords.jpg',
    'https://www.w3schools.com/w3images/snow.jpg',
    'https://q7.itc.cn/q_70/images03/20240624/7f6a15ce7fa445c8b618d667bf37fadd.jpeg',
    'https://wx1.sinaimg.cn/mw690/008s5tUHly1hv5g3y9a4ej30jg0jgjz5.jpg',
    'https://q7.itc.cn/q_70/images03/20240503/6a7e76614b8b4b8fbd3c517b98667529.jpeg',
    'https://iknow-pic.cdn.bcebos.com/4bed2e738bd4b31ccbbb152595d6277f9f2ff8ad'
]
const itemArr = new Array(itemSize).fill(0).map((_,index)=> {return {txt:'Row'+(index),src:demoList[index]||''}})
// console.log('arrItems', itemArr);
const App = () => {
    const [renderArr,setRenderArr] = useState(itemArr.slice(0,10))
    const [startIndex,setStartIndex] = useState(0)
  const containerStyle = {
    height:containnerHeight,
    border:'1px solid blue',
    overflow:'scroll'
  }
  const contentStyle ={
    height:itemSize*itemHeight,
    position:'relative'
  }
  const itemStyle = {
    height:itemHeight,
    position:'absolute'
  }
  const creatItem = ()=>{
   return renderArr.map((item,index)=>(
        <div key={item.txt} style={{...itemStyle,top:(startIndex+index)*itemHeight}}>
           {item.src && <div><img src={item.src} width={100} height={50}/></div>} 
              {item.txt}
            </div>
    ))
  }
    const scrollHandle = (e)=>{
        const start = Math.floor(e.target.scrollTop/itemHeight) - 2
        const startIndex = Math.max(start,0)
        setStartIndex(startIndex)
        const endIndex = startIndex+ Math.ceil(containnerHeight/itemHeight) + 4
        const temArr = itemArr.slice(startIndex,endIndex)
        setRenderArr(temArr)
    }
 
  return (
    // <FixedSizeList
    //   className="list"
    //   height={200}
    //   width={200}
    //   itemSize={50}
    //   itemCount={100}
    // >
    //   {Row}
    // </FixedSizeList>
      <div style={containerStyle} onScroll={scrollHandle}>
       <div style={contentStyle}>
       { creatItem() }
       </div>
    </div>
  );
}
export default App